<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <script src="../static/js/jquery-2.1.1.min.js" type="text/javascript" th:src="@{/js/jquery-2.1.1.min.js}"></script>
    <script src="../static/js/vue.js" type="text/javascript" th:src="@{/js/vue.js}"></script>
</head>
<body>
<div id="app">
    <form>
        账号：<input type="text" id="username" placeholder="请输入用户名" v-model="user.username"><br>
        密码：<input type="text" id="password" placeholder="请输入密码" v-model="user.password"><br>
        <input type="button" value="login in" @click="login">
    </form>
</div>

<script>
    // 创建vue对象
    var app = new Vue({
        // el属性：钩子、挂载点，就是用来和上述中定义的容器绑定上
        el:'#app',
        // data属性：定义变量
        data:{
            user:{
                username:'',
                password:'',
            },
        },
        // methods属性：用来定义方法
        methods:{
            // 定义登录方法
            login(){
                // 如果在请求发送完成之后，还需要使用到当前的this，就需要保存当前的this
                // 保存当前this对象，即定义一个变量，把当前this赋值给它，如 var _this = this
                var _this = this;
                $.ajax({
                    url:'/user/login',
                    dataType:'json',
                    type:'post',
                    data:_this.user
                    /*data:{
                        user:this.user.username,
                        user:this.user.password
                    }*/,success:function (data) {
                        if (data.code == 200){
                            location.href = "../index";
                        }
                    },error:function () {
                        alert("登录服务器报错");
                    }
                })
            }
        },
    });
</script>
</body>
</html>